<template>
  <j-modal
    :title="title"
    :width="950"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{style:{display:'none'}}"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-card :bordered="false" :class="{'ReplenishmentPrint':true}">
      <div class="no-print" style="text-align: right">
        <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
      </div>
      <section ref="print" id="printContent" class="replenishmentPrint">
        <div style="text-align: center">
          <p style="font-size: 24px;font-weight: 800">上海飞科生活电器有限公司</p>
          <p style="font-size: 24px;font-weight: 600">体验店进货申请表</p>
        </div>
        <!--签字-->
        <a-col :md="24" :sm="24">
          <div class="sign" style="text-align: left;height: inherit;margin-top: 45px">
            <a-col :span="24">
              <a-descriptions>
                <a-descriptions-item label="申请门店">
                  {{ this.applyStore }}
                </a-descriptions-item>
                <a-descriptions-item label="申请人">
                  {{ this.applyName }}
                </a-descriptions-item>
                <a-descriptions-item label="申请日期">
                  {{ this.applyTime }}
                </a-descriptions-item>

              </a-descriptions>
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <a-table
                rowKey="productId"
                bordered
                size="small"
                :columns="goodsColumns"
                :pagination="false"
                :dataSource="goodsData">

              </a-table>
            </a-col>
            <a-col :span="24" style="margin-top: 20px">
              <a-descriptions>
                <a-descriptions-item>
                  <!--{{ this.model.id }}-->
                </a-descriptions-item>
                <a-descriptions-item label="部门审核/日期">
                  <!--{{ this.model.memberId }}-->
                </a-descriptions-item>
                <a-descriptions-item label="财务审核/日期">
                  <!--{{ this.model.memberId }}-->
                </a-descriptions-item>

              </a-descriptions>
            </a-col>
          </div>
        </a-col>
      </section>
    </a-card>
  </j-modal>
</template>

<script>
  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'
  import JDate from '@/components/jeecg/JDate'
  import ACol from 'ant-design-vue/es/grid/Col'
  import ARow from 'ant-design-vue/es/grid/Row'
  import ATextarea from 'ant-design-vue/es/input/TextArea'

  export default {
    components: {
      JDate,
      ATextarea,
      ARow,
      ACol
    },
    name: 'StmReplenishmentPrintModal',
    data() {
      return {
        title: '操作',
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        },
        moment,
        format: 'YYYY-MM-DD HH:mm:ss',
        mainId: '',
        applyStore: '',
        applyName: '',
        applyTime: '',
        confirmLoading: false,
        url: {
          queryReplenishmentItemByMainId: '/stm/stmReplenishment/queryReplenishmentItemByMainId',
        },
        goodsColumns: [
          {
            title: '#',
            width: '90px',
            align: 'center',
            dataIndex: 'rowIndex',
            customRender: function (text, r, index) {
              return (text !== '合计') ? (parseInt(index) + 1) : text
            }
          },
          {
            title: '品类',
            align: 'center',
            dataIndex: 'productCategoryName',
          },
          {
            title: '型号',
            align: 'center',
            dataIndex: 'productSn',
          },
          {
            title: '物料号',
            align: 'center',
            dataIndex: 'materialCode',
          },
          {
            title: '单价',
            align: 'center',
            dataIndex: 'costPrice',
          },
          {
            title: '数量',
            align: 'center',
            _type:'number',
            dataIndex: 'productQty',
          },
          {
            title: '金额',
            align: 'center',
            _type:'number',
            dataIndex: 'amount',
          },

        ],
        goodsData:[],
      }
    },
    created() {
    },
    methods: {
      /** 表格增加合计行 */
      tableAddTotalRow(columns, dataSource) {
        let numKey = 'rowIndex'
        let totalRow = { [numKey]: '合计' }
        columns.forEach(column => {
          let { key, dataIndex } = column
          if (![key, dataIndex].includes(numKey)) {

            let total = 0
            dataSource.forEach(data => {
              total += column._type === 'number' ? Number.parseFloat(data[dataIndex]) : Number.NaN
              console.log(data[dataIndex], ':', (/^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseFloat(data[dataIndex]) : Number.NaN))
            })

            if (Number.isNaN(total)) {
              total = ''
            } else {
              total = Number.parseFloat(total).toFixed(2)
            }
            totalRow[dataIndex] = total
          }
        })

        dataSource.push(totalRow)
      },
      show(record) {
        if (record) {
          console.log('record => ' + record)
          this.detail( record )
        } else {
          this.$message.warning('请选择一条数据')
        }
      },
      detail(record) {
        this.mainId = record;
        console.log('mainId => ' + this.mainId)
        //this.model = Object.assign({}, record);
        this.getReplenishmentItem()
        this.visible = true
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      getReplenishmentItem() {
        getAction(this.url.queryReplenishmentItemByMainId, {mainId : this.mainId}).then(res => {
          if (res.success) {
            console.log('goodsData => ' + res.result)
            this.goodsData = res.result.printList
            this.applyStore = res.result.applyStore
            this.applyName = res.result.applyName
            this.applyTime = res.result.applyTime
            //this.goodsData = res.result
            this.tableAddTotalRow(this.goodsColumns, this.goodsData)
            //this.goodsData = [...new Set(res.result.map(data => (data['productSn'])))]
          } else {
            console.log(res.message)
          }
        })
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style scoped>
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
* {
  color: #000000 !important;
  -webkit-tap-highlight-color: #000000 !important;
}
/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

@page {
  margin-top: 25px;
  margin-bottom: 45px;
}

.replenishmentPrint {
  border: 0px solid black;
  min-width: 800px;
  color: #000000 !important;
}

.explain {
  text-align: left;
  margin-left: 50px;
  color: #000000 !important;
}

.explain .ant-input, .sign .ant-input {
  font-weight: bolder;
  text-align: center;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
}

.explain div {
  margin-bottom: 10px;
}

/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
